<template>
  <div>
    <el-form :model="lineMessage">
      <el-row>
        <el-col :span="12">
          <el-form-item label="序号：" :label-width="formLabelWidth">
            <el-input v-model="form.section_serial" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点：" :label-width="formLabelWidth">
            <el-select v-model="form.station_id" @change="itemInfo" filterable placeholder="请选择">
              <el-option v-for="item in endList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公里：" :label-width="formLabelWidth">
            <el-input v-model="form.mileage" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点类型：" :label-width="formLabelWidth">
            <el-input v-model="form.station_type" clearable />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer dialogDetail">
      <el-button @click="clearShow">取 消</el-button>
      <el-button type="primary" @click="sendLine">确 定</el-button>
    </div>
  </div>
</template>

<script>
const api = $api.dispatch.route_section

export default {
  props: ['lineMessage', 'editCode', 'endList', 'routeId'],
  watch: {
    lineMessage(a) {
      this.form = a
    },
    routeId(a) {
      this.route_id = a
    },
    editCode(a) {
      this.code = a
    },
    deep: true,
  },
  data() {
    return {
      showModel: false,
      formLabelWidth: '120px',
      gridData: null,
      code: '',
      route_id: '',
      form: {},
    }
  },
  mounted() {
    this.form = this.lineMessage
    this.code = this.editCode
    this.route_id = this.routeId
  },
  methods: {
    clearShow() {
      this.$emit('childByValue', false, 1)
    },
    itemInfo(i) {
      this.endList.forEach((item) => {
        if (item.value == i) {
          this.form.section_name = item.label
        }
      })
    },
    sendLine() {
      this.form.route_id = this.route_id
      if (this.code === 1) {
        api.update(this.form).then((res) => {
          this.gridData = res
          this.$message({
            message: '更新成功！',
            type: 'success',
          })
          this.$emit('childByValue', false)
        })
      }
      if (this.code === 2) {
        api.add(this.form).then((res) => {
          this.gridData = res
          this.$message({
            message: '添加成功！',
            type: 'success',
          })
          this.$emit('childByValue', false)
        })
      }
    },
    getData() {
      api.query(this.list).then((res) => {
        this.gridData = res
      })
    },
  },
}
</script>

<style scoped>
.dialogDetail {
  text-align: right;
}
</style>